<template>
  <div class="rank_title">
    <div>{{$t("union.title")}}</div>
    <div>{{$t("union.subTitle")}}</div>
  </div>
  <BgLine/>
  <div class="rank_main">
    <div class="rank_search">
      <input type="text" v-model="s.q">
      <div @click="init">{{$t("union.search")}}</div>
    </div>
    <div class="rank_list">
      <div class="rank_li" v-for="(item,index) in s.rankList" :key="item.name">
        <div class="rank_li_title">
          <div class="rank_li_title_l">
            <div :class="RankclassName[item.rank]">{{item.rank}}</div>
            <div :style="RankNameColor[item.rank]">{{item.name}}（Lv:{{item.level}})</div>
          </div>
          <div class="rank_li_title_r" @click="_addUnion(item)">{{$t("union.add")}}</div>
        </div>
        <div class="rank_li_main">
          <div>
            <div>{{$t("union.address")}}{{item.money}}</div>
            <div>{{$t("union.power")}}{{item.zl}}</div>
          </div>
          <div>{{$t("union.num")}}{{item.people}}</div>
        </div>
      </div>
    </div>

  </div>
  <div class="rank_if">
    <div>{{$t("union.divideTitle")}}</div>
    <div>{{$t("union.divideContent")}}</div>
  </div>
</template>

<script setup>
    import {reactive, computed, ref} from 'vue'
    import {useStore} from 'vuex'
    import http from '../../http'
    import BgLine from '@components/BgLine/index.vue';

    const {state, commit} = useStore()

    const s = ref({
      q: '',
      rankList: [],
    })

    async function init() {
      var res = await http.get(`/api/union/top10?q=${s.value.q}`)
      if (res.code === 200) {
        var list = res.data.map((row, i) => {
          return {
            name: row.name,
            money: row.address.substr(0,3) + '...' + row.address.substr(35),
            zl: row.totalCombatPower,
            people: row.people,
            level: row.level,
            rank: i+1,
            id: row.id,
          }
        })
        s.value.rankList = list
      }
    }

    init()

    const RankclassName = {
        1: 'rank_1',
        2: 'rank_2',
        3: 'rank_3',
    }
    const RankNameColor = {
        1: {color: '#BF4028'},
        2: {color: '#2E7584'},
        3: {color: '#4BA701'},
    }
    const _addUnion = (item) => {
        commit('changePopupType',false)
        commit('changeOverlayName', {name: 'addUnion', params: {}})
        commit('changeUnionName', item)
    }

</script>

<style scoped lang="scss">
  .rank_title {
    height: 174px;
    width: 100%;
    background: url("@/assets/RankingList/bg_r.png") no-repeat center;
    background-size: cover;
    padding-top: 10px;

    div {
      &:nth-child(1) {
        font-size: 30px;
        font-family: yuweij;
        color: #EEBF43;
        height: 41px;
      }

      &:nth-child(2) {
        font-size: 20px;
        font-family: '045-SSYiFeiTi, 045';
        font-weight: normal;
        color: #FFFFFF;
        margin-top: 80px;
      }
    }
  }

  .rank_main {
    padding: 18px 10px 0;
    background-color: #0F0A08;
  }

  .rank_search {
    display: flex;
    align-items: center;
    padding: 0 11px;

    input {
      outline: none;
      border: none;
      background-color: #48423D;
      border-radius: 17px;
      height: 33px;
      width: 252px;
      font-size: 14px;
      color: #Fff;
      padding-left: 15px;
    }

    div {
      width: 55px;
      height: 30px;
      background: #D8BC84;
      border-radius: 15px;
      font-size: 14px;
      color: #Fff;
      line-height: 30px;
      @include fontTCRegular;
      margin-left: 10px;
    }
  }

  .rank_list {
    width: 100%;
    margin-top: 19px;
    padding-bottom: 64px;
  }

  .rank_li {
    margin-bottom: 10px;
    border-radius: 4px;
    overflow: hidden;
  }

  .rank_li_title {
    height: 42px;
    background-color: #48423D;
    padding: 0 15px;
    @include flex;
  }

  .rank_li_main {
    height: 61px;
    background-color: #34302D;
  }

  .rank_li_title_l {
    display: flex;
    align-items: center;

    div {
      &:nth-child(1) {
        width: 24px;
        height: 22px;
        background-color: #0F0B09;
        font-size: 14px;
        @include fontTCMedium;
        font-weight: 600;
        color: #D9D4A6;
        line-height: 22px;
      }

      &:nth-child(2) {
        font-size: 14px;
        @include fontTCMedium;
        font-weight: 600;
        color: #D9D4A6;
        margin-left: 8px;
      }
    }

  }

  .rank_li_title_r {
    width: 58px;
    height: 24px;
    background: $color;
    border-radius: 12px;
    font-size: 11px;
    @include fontSCRegular;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 24px;
    cursor: pointer;
  }

  .rank_li_main {
    padding: 10px 15px;

    > div {
      margin-bottom: 5px;
      @include flex;
      font-size: 13px;
      color: rgba(216, 193, 170, .69);
    }
  }

  .rank_1 {
    background: url("@/assets/RankingList/icon_ranking_1.png") no-repeat center !important;
    background-size: cover !important;
  }

  .rank_2 {
    background: url("@/assets/RankingList/icon_ranking_2.png") no-repeat center !important;
    background-size: cover !important;
  }

  .rank_3 {
    background: url("@/assets/RankingList/icon_ranking_3.png") no-repeat center !important;
    background-size: cover !important;
  }

  .rank_if {
    /*margin-top: 30px;*/
    width: 100%;
    height: 44px;
    background: #845F49;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    div {
      font-size: 14px;

      &:nth-child(1) {
        color: #fff;
        font-weight: bold;
      }

      &:nth-child(2) {
        color: $color;
      }
    }
  }
</style>
